<template>
<div>
  <!-- 旋转 -->
  <div 
    class="container" 
    :style="spinStyle"
    v-if="isSpin"
  >
    <div class="front"></div>
    <div class="back"></div>
  </div>

  <!-- 结果 -->
  <div 
    class="res"
    v-else
  >
    <div class="front" v-if="num !== 2"></div>
    <div class="back" v-else></div>
  </div> 

  <!-- 数字 -->
  <div class="num">{{num}}</div>
</div>
 
</template>

<script>
export default {
  props: ['isSpin', 'num'],
  data(){
    return {
      spinStyle:{
        animation: 'spin 0.6s linear infinite'
      }
    }
  }, 
}
</script>

<style>
  .container {
    position: relative;
    /* margin-top: 20px; */
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    /* perspective: 100px; */
    
    /* border: 1px solid red; */
  }

  .front {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('../assets/front.png') -2px -8px;
    background-size: 106%;
    transform: translateZ(6px);
    /* border: 1px solid red; */
  }

  .back {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('../assets/back.png') -1px -8px;
    background-size: 107%;
    /* border: 1px solid red; */
  }

  @keyframes spin {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
  }

  .res {
    position: relative;
    width: 100px;
    height: 100px;
  }

  .num {
    width: 100px;
    margin-top: 10px;
    text-align: center;
  }
</style>